const getSize = (size) => {
  return size / 16 + "rem";
};
/** @type {import('tailwindcss').Config} */
module.exports = {
  devtools: { enabled: true },
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./utils/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {
      colors: {
        theme: "#C245BF",
        bac:"#F0F3F4",
        c9:"#999999",
        c6:"#666666",
        bor:'#E4E4E4'
      },
    },
    screens: {

      "xl": {  min: "1441px" },
      // => @media (max-width: 1535px) { ... }
      // 大于等于1023   小于等于1200px
      // xl: { max: "1200px", min: "1023px" },
      // => @media (max-width: 1279px) { ... }

      lg: { max: "1440px", min: "751px" },
      // => @media (max-width: 1023px) { ... }

      // md: { max: "766px", min: "639px" },
      // => @media (max-width: 767px) { ... }
      sm: { max: "750px" },
      // => @media (max-width: 639px) { ... }
    },

    fontSize: {
      mi: getSize(12),
      sm: getSize(14),
      base: getSize(16),
      xl: getSize(18),
      "2xl": getSize(20),
      "3xl": getSize(22),
      "4xl": getSize(24),
      "5xl": getSize(26),
      "6xl": getSize(28),
      "7xl": getSize(30),
      "8xl": getSize(32),
      "9xl": getSize(34),
      "10xl": getSize(36),
      "11xl": getSize(38),
      "12xl": getSize(40),
    },
  },
  plugins: [
    function ({ addVariant }) {
      // addVariant("child", "& > *");
    },
    require("@tailwindcss/aspect-ratio"),
  ],
  corePlugins: {
    aspectRatio: false,
  },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
};
